/**
 * Created by web-01 on 2018/2/6.
 */
$(()=>{//广告轮播图 ------ 大
   $.getJSON("data/index/getCarousel.php")  //用get方法从getCarousel.php文件中获取json格式数据
       .then(data=>{
           var html = "";
           for(var p of data){
               html += `<li>
					<a href="${p.href}">
					    <img src="${p.img}" alt="${p.title}">
					</a>
			   </li>`;
           }
           //轮播循环完后，展示出第一张轮播图的数据，轮播图数量(3+1)
           html +=`<li>
                <a href="${data[0].href}">
                    <img src="${data[0].img}" title="${data[0].title}">
                </a>
           </li>`;
           //设置轮播的宽高
           var LIWIDTH=702,moved=0,interval=500,wait=5000,timer=null;
           var $ul=$("#banner");
           $ul.html(html).css("width",(data.length + 1) * LIWIDTH);

           //设置小圆点
           var $ultabs = $("#banner-tabs");
           //在轮播图中添加data.length个平铺的小圆点，并为第一个小圆点设置class名为js-selected
           $ultabs.html("<li></li>".repeat(data.length))
                        .children().first().addClass("js-selected");

           //设置move函数，  dir表示轮播图上的左右按钮
           function move(dir = 1) {
               if(moved ==0 && dir == -1){
                   moved = data.length;
                   $ul.css("left", -LIWIDTH * data.length);
               }
               moved += dir;
               $ul.animate({
                   left: -LIWIDTH * moved
               }, interval, function(){
                   if(moved == data.length){
                       moved = 0;
                       $ul.css("left", 0);
                   }
                   $ultabs.children(":eq("+moved+")").addClass("js-selected")
                       .siblings().removeClass("js-selected");
               });
           }
           timer = setInterval(move, wait + interval);
           $("#first-floor-middle-top").hover(
               function () {
                   clearInterval(timer);
                   timer = null;
               },
               function () {
                   timer = setInterval(move, wait + interval);
               }
           );

           $ultabs.on("click", "li:not(.js-selected)", function () {
               var i = $(this).index();
               moved = i;
               $ul.stop(true).animate({
                   left:-LIWIDTH*moved
               },interval,function(){
                   $ultabs.children(":eq("+moved+")").addClass("js-selected")
                       .siblings().removeClass("js-selected");
               })
           });

           $(".ck-right").click(function(){
               if(!$ul.is(":animated"))
                   move();
           });
           $(".ck-left").click(function(){
               if(!$ul.is(":animated"))
                   move(-1);
           });
           // $(".first-floor-middle-top").onmouseover(function(e){
           //     e.preventDefault();
           //     $(".ck-silde").css("display","block");
           // }).onmouseout(function (e) {
           //     e.preventDefault();
           //     $(".ck-silde").css("display", "none");
           // })
           $(".first-floor-middle-top").mouseover(function(e){
               e.preventDefault();
               $(this).attr("style","opacity:0.8");
               $(".ck-silde").css("display","block");
           }).mouseout(function(e){
               e.preventDefault(e);
               $(this).attr("style","opacity:1");
               $(".ck-silde").css("display", "none");
           })
       })
});
$(()=>{//加载首页 书籍分类
    $.ajax({
        type: "GET",
        url: "data/index/getBook_family.php",
        dataTpe: "json"
    }).then(data=>{
        for(var i=0, html=""; i<data.length; i=i+2){
            html += `<li>
                        <a href="#">
                            <span class="label">${data[i].fname}</span>
                            <span class="num">${data[i].num}</span>
                        </a>
                        <a href="#">
                            <span class="label">${data[i+1].fname}</span>
                            <span class="num">${data[i+1].num}</span>
                        </a>
                    </li>`;
        }
        $("div.first-floor-left>ul").html(html);
        // console.log(11);
        $("div.first-floor-left>ul>li:odd").addClass("itm"); //不是注释，不能删、尚未解决的问题，不同颜色
    })
});
$(()=>{//三榜 "畅销榜""月度榜""好评榜"
    $("div.u-nav-tab a.ranking-list").click(function(){
        var list = $(this).data("list");
        // console.log(list);
        // var $i = $("div.u-nav-tab").next().children().has($("."+list));
        // if($("div.u-nav-tab").next().children().has($("."+list))){
        //     $("div.u-nav-tab").next().children().show().siblings().hide();
        // }
        $("."+list).show().siblings().hide();
        $(".u-more").show();
        var i = $(this).parent().index();
        console.log(i);
        $(".box").css("left", i*36.5);

    });
    // 动态生成，畅销榜
    $.ajax({
        type:"GET",
        url:"data/index/getSold.php",
        dataType:"json",
        success:function(data){
            var html = "";
            var i = 0;
            for(var item of data){
                html += `<li class="itm">
								<em class="hot">${++i}.</em>
								<a class="title" href="#" 
						title="${item.title}">${item.title}</a>
								<p class="u-author">
									<span>${item.author}</span>
								</p>
							</li>`;
            }
            $("ul.u-txtlist").html(html);
        }
    })
});
$(()=>{//加载首页商品
    $.ajax({
        type: "GET",
        url: "data/index/getRecommended.php",
        dataType: "json"
    }).then(data=>{
        for(var i = 0, html = ""; i < 14; i++){
            var p = data[i];
            // console.log(p);
            html += `<li class="u-bookitm j-bookitm" data-id="9df60cd7daae4fd1a67308e925b2f642">
								<div class="book">
									<a class="cover" href="${p.href}" hidefocus="hidefocus" target="_blank">
										<img src="${p.pic}" alt="${p.title}" ondragstart="return false;" oncontextmenu="return false;" onload="" style="display: block;">
									</a>
									<a class="title" href="${p.href}" hidefocus="hidefocus" target="_blank">${p.title}</a>
								</div>
								<div class="info">
									<div class="u-stargrade" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
										<div class="icon grade0"></div>
										<span class="num" itemprop="ratingValue">(0)</span>
									</div>
									<div class="u-author">
										<span>${p.author}</span>
									</div>
									<div class="u-price">
										<em>¥ ${p.price} </em>
										<del>¥ ${p.del_price}</del>
									</div>
								</div>
							</li>`;
        }
        $(".second-floor-right>.u-colslist>ul").html(html);

        //3F 特价图书
        for(var i=0, html=""; i<data.length-14; i++){
            var p = data[i];
            html += `<li class="u-bookitm0 j-bookitm" data-id="a044031d554246a8838a7cb3f36ff2e0">
							<div class="book">
								<a href="${p.href}" class="cover" hidefocus="hidefocus" target="_blank">
									<img src="${p.pic}" alt="${p.title}" ondragstart="return false;" oncontextmenu="return false;" onload="" style="display: block;">
								</a>
								<a href="${p.href}" class="title" hidefocus="hidefocus" target="_blank">${p.title}</a>
							</div>
							<div class="info">
								<p class="u-author">
									<span>${p.author}</span>
								</p>
								<div class="u-price">
									<em>¥ ${p.price} </em>
									<del>¥ ${p.del_price}</del>
								</div>
							</div>
						</li>`;
        }
        $("div.third-floor>div.u-colslist>ul").html(html);
    })
});